<template>
  <div>
    <h1>我是子组件</h1>
    <button @click="CpnUpdate">更新</button>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  getCurrentInstance,
  ref
} from 'vue'

export default defineComponent({
  name: 'Child',
  setup() {
    console.log('setup')
    const { proxy: _this } = getCurrentInstance()
    onBeforeMount(() => {
      console.log('onBeforeMount,Child')
    })
    onMounted(() => {
      console.log('onMounted,Child')
    })
    onBeforeUpdate(() => {
      console.log('onBeforeUpdate,Child')
    })
    onUpdated(() => {
      console.log('onUpdated,Child')
    })
    onBeforeUnmount(() => {
      console.log('onBeforeUnmount,Child')
    })
    onUnmounted(() => {
      console.log('onUnmounted,Child')
    })
    const CpnUpdate = () => {
      _this.$forceUpdate()
    }
    return {
      CpnUpdate
    }
  }
})
</script>

<style scoped>
</style>